<template>
	<view class="classification">
		<view class="left">
			<scroll-view class="leftScroll" style="height:75vh;" :scroll-top="scrollTop" scroll-y="true">
				<view :class="{type1:true, current:(index1 === i)}" :style="{lineHeight: type1LineHeight, fontSize: type1Size, height: type1Height, color: selected(i)}" v-for="(item,i) in tabbar" :key="i" @click="changeType1(item,i)"><text></text>{{item.name}}</view>
			</scroll-view>
		</view>
		<view class="right">
			<scroll-view class="rightScroll" style="height: 75vh;" @scrolltolower="getMoreLists" :scroll-top="scrollTop" scroll-y="true"  @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
				<!-- <view class="type2" v-for="(item,i) in data2" :key="i">
					<p :style="{fontSize: type2Size}">{{ item.name }}</p>
					<view class="type3Box">
						<view class="type3" v-for="(item1,i1) in item.child" :key="i1" @click="selectType1(i,i1)">
							<image class="icon" mode="aspectFill" lazy-load="true" :src="item1.icon"></image>
							<text :style="{fontSize: type3Size}">{{item1.name}}</text>
						</view>
					</view>
				</view> -->
				<view class="thumb-box type2" v-for="(item, index) in list" :key="index" @click="handleItemClick(item)">
					<view class="item-line">
						<text class="title">需要</text>
						<text class="value">{{item.ineed}}</text>
					</view>
					<view class="item-line">
						<text class="title">意向</text>
						<text class="value">{{item.imean}}</text>
					</view>
					<view class="item-line">
						<text class="name">{{item.userName}}</text>
					</view>
				</view>
				<u-toast ref="uToast" />
				<u-loadmore v-if="list.length > 2" class="u-m-t-40" :status="loadStatus"></u-loadmore>
				<view class="u-flex u-row-center u-m-50" v-if="list.length == 0" style="flex-direction: column;">
					<image style="width:300rpx;height:300rpx;" mode="widthFix" src="../../static/img/no.png"></image>
					<text style="color:#ccc">暂无数据</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import classifyData from "@/common/classify.data.js";
	export default {
		props: {
			index: {
				type: Number,
				default: 0
			},
			list: {
				type: Array,
				default: []
			},
			selectedColor: {
				type: String,
				default: "#0D1D36"
			},
			type1Size: {
				type: String,
				default: "14px"
			},
			type2Size: {
				type: String,
				default: "14px"
			},
			type3Size: {
				type: String,
				default: "10px"
			},
			type1Height: {
				type: String,
				default: "90rpx"
			},
			type1LineHeight: {
				type: String,
				default: "90rpx"
			}
		},
		data() {
			return {
				tabbar:classifyData,
				pageNum: 0,
				triggered: false,//下拉刷新是否被触发
				_freshing: false, // 是否正在刷新
				loadStatus: 'loadmore',
				scrollTop: 0,
				data1: [], // 用来存储传来的数据
				index1: 0, // 标识当前选中的type1
				data2: [], // 用来存储当前选中的type2数据
				color: "", // 用来存储选中type1的颜色
				load: 0 // 用来判断是否是第一次加载数据
			}
		},
		mounted() {	
		},
		beforeUpdate() {
			if(this.load == 0){
				// 判断是不是首次加载
				// 如果是将传入的值初始化到本地
				this.index1 = this.index
				this.data1 = this.list
				this.color = this.selectedColor
				this.data2 = this.list[this.index] != undefined ? this.list[this.index].child:[];
				this.changeType1(this.data1[this.index1],this.index1)
				this.load++
			}
			// 如果不是则不执行操作				
		},		
		methods: {
			// 自定义下拉刷新控件被下拉
			onPulling(e) {
				this.triggered = true; // 需要重置
				this.pageNum = 1;
			},
　　　　　　// 自定义下拉刷新被触发
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				if (!this.triggered) this.triggered = true; //界面下拉触发，triggered可能不是true，要设为true
				const isRefresh = true
				this.triggered = false;
				this._freshing = false;
				this.$emit("onRefresh", this.isRefresh)
			},
			// 自定义下拉刷新被复位
			onRestore() {
				this.triggered = false; // 需要重置
			},
			// 自定义下拉刷新被中止
			onAbort() {
				this.triggered = false;
			},
　　　　　　// 滚动到底部 加载更多
			getMoreLists(){
				if(this.totalSize == this.list.length ||     this.isLoading){
					return
				}
				console.log("getMoreLists");
				this.pageNum += 1;
				this.loadStatus= "loading";
				setTimeout(() => {
					this.loadStatus="loadmore";
				}, 1000);
				this.$emit("getMoreLists",this.pageNum)
			},
			changeType1(item,index) {
				this.pageNum = 1;
				this.index1 = index
				if (item === undefined ||item === null || item.child === undefined || item.child === null){
					console.log("该内容为空！")
					this.data2 = []
				} else{					
					this.data2 = item.child	
				}
				this.selectType1(this.index1);
			},
			selectType1(i, i1) {
				this.$emit("selectType", this.index1)
			},
			onscroll(i, i1) {
				this.$emit("scrollTop", this.index1)
			},
			handleItemClick(item) {
				this.$emit("handleItemClick",this.index1, item)
			},
			// 更换颜色
			selected: function(val){
				return (val === this.index1?this.selectedColor+" !important":"")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.classification {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		background-color: #fff;
		
		/* 隐藏滚动条 */
		::-webkit-scrollbar {  
			display: none;  
			width: 0 !important;  
			height: 0 !important;  
			-webkit-appearance: none;  
			background: transparent;  
		}
		.left {
			width: 200rpx;
			background: #F5F5F9;
			.type1 {
				width: 200rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				font-size: 28rpx;
			}
			.current {				
				font-size: 28rpx;
				color: #0D1D36;
				background: #FFFFFF;				
				display: flex;
				align-items: center;
				justify-content: center;
				text {
					margin:7rpx 10rpx 0 10rpx;
					width: 6rpx;
					height: 28rpx;
					background: #4B9CFF;
				}
			}
		}
		.right {
			float: right;
			width: 550rpx;			
			.type2 {
				p {
					margin: 46rpx 0 26rpx 0;
					font-size: 14px;
				}
				.type3Box {
					width: 100%;
					height: auto;
					border-radius: 28rpx;
					background-color: #fff;
					display: flex;
					flex-wrap: wrap;
					padding-top: 36rpx;
					margin-bottom: 36rpx;
					.type3 {
						margin: 0 36rpx 36rpx 36rpx;
						.icon {
							width: 100rpx;
							height: 100rpx;
							display: block;
						}
						text {
							padding: 18rpx 0;
							display: block;
							width: 100rpx;
							font-size: 10px;
							overflow: hidden;
							text-align: center;
						}
					}
				}
			}
		}
	}
	.thumb-box {
		width: 100%;
		display: flex;
		// align-items: center;
		// justify-content: center;
		flex-direction: column;
		padding: 33upx 33upx 0 33upx;
		border-bottom: #DADFED solid 1upx;
		.item-line{
			margin-bottom: 34upx;
			.name{
				color: #9DA2B0;
				font-size: 28upx;
			}
			.title{
				color: #4B9CFF;
				font-size: 28upx;
			}
			.value{
				color: #0D1D36;
				font-size: 28upx;
				margin-left: 60upx;
			}
		}
	}
	.thumb-box:last-child{border:none;}
	
	.item-menu-image {
		width: 120rpx;
		height: 120rpx;
	}
</style>
